.custom-btn {
  width: 130px;
  height: 45px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}

.kbtn {
  background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.kbtn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.kbtn:before,
.kbtn:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.9), -4px -4px 5px 0px rgba(255, 255, 255, 0.9),
    7px 7px 20px 0px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.kbtn:before {
  height: 0%;
  width: 2px;
}
.kbtn:after {
  width: 0%;
  height: 2px;
}
.kbtn:hover {
  color: rgba(251, 75, 2, 1);
  background: transparent;
}
.dark .kbtn:hover {
  color: #ffffff;
  background: #252525;
}
.kbtn:hover:before {
  height: 100%;
}
.kbtn:hover:after {
  width: 100%;
}
.kbtn span:before,
.kbtn span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.9), -4px -4px 5px 0px rgba(255, 255, 255, 0.9),
    7px 7px 20px 0px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.kbtn span:before {
  width: 2px;
  height: 0%;
}
.kbtn span:after {
  height: 2px;
  width: 0%;
}
.kbtn span:hover:before {
  height: 100%;
}
.kbtn span:hover:after {
  width: 100%;
}

#qr-code-dialog {
  margin: 10rem auto auto;
  border-radius: 1.2rem;
  width: min-content;
  padding: 1.2rem 1.2rem 1.5rem;
  user-select: none;
}

.qr-code {
  width: 18rem;
  height: 18rem;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


.uda {
  position: relative; /* 为伪元素定位做准备 */
  display: inline-block; /* 确保只有文本内容受伪元素影响 */
}

/* 创建一个伪元素作为下划线 */
.uda::after {
  content: ''; /* 伪元素无内容 */
  position: absolute; /* 绝对定位 */
  bottom: -4px; /* 下划线位于文本底部 */
  left: 0; /* 开始时下划线在最左侧 */
  width: 0%; /* 初始宽度为0 */
  height: 1px; /* 下划线高度 */
  background-color: currentColor; /* 使用文本颜色作为下划线颜色 */
  transition: width 0.3s ease; /* 宽度变化的过渡效果 */
}

/* 鼠标悬停时下划线动画 */
.uda:hover::after {
  width: 100%; /* 悬停时下划线宽度变为100% */
}

/* 可选：如果需要在移出时有反向动画，可以通过设置不同的transition-timing-function实现不同效果 */
.uda:hover::after {
  transition: width 0.3s ease-out; /* 或其他timing-function以改变动画速度曲线 */
}